<template>
	<view class="mine-title-info-contanier">
		<view class="flex-bt">
			<view class="mine-title-left">
				<image :src="userStore.userInfo?.avatar" class="profile-picture" v-if="userStore.userInfo?.avatar">
				</image>
				<image src="/static/zu428.png" class="profile-picture" v-else></image>
				<view class="mineInfoText">
					<text v-if="userStore.userInfo?.nickName" class="userName">{{userStore.userInfo?.nickName}}</text>
					<template v-else>
						<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" plain="true"
							class="loginBtn">立即登录</button>
						<text class="toLoginText">登录后可收藏喜欢的菜谱</text>
					</template>

				</view>
			</view>
			<view class="mine-title-right">
					<image src="/static/toLeft.png" v-if="userStore.userInfo?.avatar" @click="toUpdateUserInfo">
					</image>
			</view>
		</view>
		<view class="vipInfo">
			<view class="vip-info-text"><text>升级为VIP</text></view>
			<image src="/static/mengbanzu87.png" mode=""></image>
			<image src="/static/toLeft.png" class="vip-right"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		watch
	} from 'vue';
	import {
		getLoginByPhoneApi
	} from '../../api/mine';
	import {
		useUserStore
	} from '../../store/user';
	const userStore = useUserStore();

	const toUpdateUserInfo = () => {
	    uni.navigateTo({
	        url: '/pages/updateuserinfo/updateuserinfo',
	    })
	}

	function onGetPhoneNumber(event) {
		uni.login({
			success(res) {
				console.log(res.code);
				getLoginByPhoneApi({
					appId: 'wxe1dbfd6033b7ee5a',
					appSecret: '90284fef14ede5b860df98fdbe255c39',
					code: res.code,
					encryptedData: event.detail.encryptedData,
					iv: event.detail.iv
				}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('login_token', res.token);
						userStore.getUserInfoAction();
					}
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.mine-title-info-contanier {
		padding: 0 34rpx;
	}

	.mine-title-left {
		display: flex;

		.profile-picture {
			width: 116rpx;
			height: 116rpx;
		}
	}

	.mineInfoText {
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		// justify-content: start;
		align-items: start;
		font-family: PingFang SC;

	}

	.loginBtn {
		width: 180rpx;
		font-size: 30rpx;
		color: #5a5a5a;
		border: none;
		background-color: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.toLoginText {
		font-size: 24rpx;
		color: #d1d1d1;
		margin-bottom: 16rpx;
	}



	.mine-title-right {
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.vipInfo {
		position: relative;
		margin: 34rpx auto 0;

		image {
			width: 100%;
			height: 118rpx;
		}

		.vip-right {
			position: absolute;
			top: 20rpx;
			right: 72rpx;
			width: 42rpx;
			height: 42rpx
		}

		.vip-info-text {
			font-family: PingFang SC;
			font-size: 22rpx;
			line-height: 32rpx;
			color: #b4853f;
			font-size: 22rpx;
			position: absolute;
			top: 20rpx;
			left: 102rpx;
			z-index: 2;
		}
	}

	.userName {
		font-size: 30rpx;
		margin-top: 20rpx;
	}
</style>